<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>气象数据</title>
		<link rel="stylesheet" href="../src/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../dist/css/common.css"/>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="w-title"><span class="w-blueline"></span><a href="###">气象检测</a></div>
			<h3 class="w-table-title">气象信息历史数据报表</h3>
			<table id="demoTable" lay-filter="test"></table>
		</div>
		<script src="../src/layui.js"></script>
		<script>
			layui.use(['table', 'jquery'], function() {
				var table = layui.table;
				var $ = jQuery = layui.$;
				//第一个实例
				table.render({
					elem: '#demoTable',
					//					height: 315
					//  ,url: '/demo/table/user/' //数据接口
					//						,
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'dq',
								title: '地区',
								width: '10%',
								sort: true,
								align:'center',
								fixed: 'left'
							}, {
								field: 'fx',
								title: '风向',
								align:'center',
								width: '10%'
							}, {
								field: 'fl',
								title: '风力',
								align:'center',
								width: '10%',
								sort: true
							}, {
								field: 'wd',
								title: '温度',
								align:'center',
								width: '10%'
							}, {
								field: 'xdsd',
								title: '相对湿度',
								align:'center',
								width: '20%'
							}, {
								field: 'rq',
								title: '日期',
								width: '20%',
								align:'center',
							}, {
								field: 'cjsj',
								title: '采集时间',
								width: '20%',
								align:'center',
							}
						]
					],
					data: [{
						"dq": "哈尔滨市",
						"fx": "西南风",
						"fl": "3-4",
						"wd": "19",
						"xdsd": "50",
						"rq": "2018-01-01",
						"cjsj": "2018-01-01 9：00",
					},{
						"dq": "哈尔滨市",
						"fx": "西南风",
						"fl": "3-4",
						"wd": "19",
						"xdsd": "50",
						"rq": "2018-01-01",
						"cjsj": "2018-01-01 9：00",
					}]
				});
				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			});
		</script>
	</body>

</html>